// studentPicker.js



(function () {
    function createStudentPicker(){
        // 动态注入样式
        const style = document.createElement('style');
        style.textContent = `
        .student-picker-container {
            width: 100%;
            margin: auto;
            text-align: center;
        }
        .student-picker-table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }
        .student-picker-table th, .student-picker-table td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: center;
        }
        .student-picker-table th {
            background-color: #f2f2f2;
        }
        .student-picker-table .selected {
            background-color: #FFF000; /* 背景颜色 */
            font-weight: bold; /* 文本加粗 */
            color: #FF0000; /* 字体颜色为红色 */
        }
        .student-picker-name {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 20px;
        }
        .student-picker-button {
            background-color: #4CAF50; /* 绿色背景 */
            color: white; /* 白色文字 */
           padding: 15px 30px; /* 增加内边距，使按钮更大 */
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 18px; /* 增加字体大小 */
            width: 200px; /* 设置按钮宽度 */
            height: 60px; /* 设置按钮高度 */

        }
        .student-picker-button.disabled {
            background-color: #cccccc; /* 灰色背景 */
            cursor: not-allowed; /* 禁用鼠标指针 */
        }
        .student-picker-button-container {
            display: flex;
            justify-content: center;
        }
    `;
        document.head.appendChild(style);

        // 点名程序类
        class StudentPicker {
            constructor(container, config) {
                this.container = container; // 容器元素
                this.config = {
                    students: config.students || [], // 学生名单
                    cellWidth: config.cellWidth || '120px', // 单元格宽度
                    cellHeight: config.cellHeight || '60px', // 单元格高度
                    callCount: config.callCount || 20, // 随机点名次数
                    pickRandomStudentDelay: config.pickRandomStudentDelay || 150 // 点名间隔时间
                };

                // 初始化 DOM 结构
                this.initDOM();
                // 初始化事件
                this.initEvents();
            }

            // 初始化 DOM 结构
            initDOM() {
                this.container.innerHTML = `
                <div class="student-picker-container">
                    <div class="student-picker-name" id="studentPickerName"></div>
                    <table class="student-picker-table">
                        <thead>
                            <tr>
                                <th colspan="10">学生名单</th>
                            </tr>
                        </thead>
                        <tbody id="studentPickerTableBody"></tbody>
                    </table>
                    <div class="student-picker-button-container">
                        <button class="student-picker-button" id="studentPickerButton">随机点名</button>
                    </div>
                </div>
            `;

                this.studentTableBody = this.container.querySelector('#studentPickerTableBody');
                this.studentNameElement = this.container.querySelector('#studentPickerName');
                this.pickerButton = this.container.querySelector('#studentPickerButton');

                // 生成学生表格
                this.generateStudentTable();
            }

            // 生成学生表格
            generateStudentTable() {
                this.studentTableBody.innerHTML = '';
                const columnsPerRow = 8;
                const rowCount = Math.ceil(this.config.students.length / columnsPerRow);

                Array.from({ length: rowCount }).forEach((_, rowIndex) => {
                    const row = document.createElement('tr');

                    Array.from({ length: columnsPerRow }).forEach((_, colIndex) => {
                        const cellName = document.createElement('td');
                        const index = rowIndex * columnsPerRow + colIndex;

                        if (index < this.config.students.length) {
                            cellName.textContent = this.config.students[index];
                            cellName.style.width = this.config.cellWidth;
                            cellName.style.height = this.config.cellHeight;
                        }

                        row.appendChild(cellName);
                    });

                    this.studentTableBody.appendChild(row);
                });
            }

            // 随机选择学生
            pickRandomStudent() {
                const nonEmptyStudents = this.config.students.filter(name => name.trim() !== '');

                if (nonEmptyStudents.length === 0) {
                    console.warn('没有有效的学生姓名可供选择');
                    return;
                }

                const cells = Array.from(this.studentTableBody.getElementsByTagName('td'));
                const randomIndex = Math.floor(Math.random() * nonEmptyStudents.length);
                const randomStudent = nonEmptyStudents[randomIndex];

                this.studentNameElement.textContent = randomStudent;
                this.studentNameElement.style.opacity = 1;

                cells.forEach(cell => {
                    const isSelected = cell.textContent === randomStudent;
                    cell.classList.toggle('selected', isSelected);
                });
            }

            // 处理按钮点击事件
            handleOnclick() {
                const button = this.pickerButton;

                if (!(button instanceof HTMLElement)) {
                    console.error('按钮元素无效');
                    return;
                }

                const self = this;
                const delayTime = this.config.pickRandomStudentDelay;

                async function delay(ms) {
                    return new Promise((resolve) => setTimeout(resolve, ms));
                }

                const runTask = async () => {
                    for (let callCount = 0; callCount < self.config.callCount; callCount++) {
                        self.pickRandomStudent();
                        await delay(delayTime);
                    }

                    button.disabled = false;
                    button.classList.remove('disabled');
                };

                button.disabled = true;
                button.classList.add('disabled');
                runTask();
            }

            // 初始化事件
            initEvents() {
                this.pickerButton.addEventListener('click', () => this.handleOnclick());
            }
        }

        // 将 StudentPicker 类挂载到全局对象
        window.StudentPicker = StudentPicker;
    }
    createStudentPicker();
})();